<template>
  <el-container class="admin-container">
    <!-- 顶部 -->
    <el-header class="admin-header">
      <div class="header-right">
        <el-avatar icon="el-icon-user" class="user-avatar" />
        <span class="username">{{ username }}</span>
      </div>
    </el-header>

    <!-- 中部主体 -->
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside width="200px" class="admin-aside">
        <el-menu
            class="el-menu-vertical"
            :default-active="activeMenu"
            @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard" icon="el-icon-s-home">
            <a href="/Approval" class="nav-item">审批</a>
          </el-menu-item>
          <el-menu-item index="resetPassword" icon="el-icon-unlock" >
            <a href="/RePassword" class="nav-item">重置他人密码</a>
          </el-menu-item>

          <el-menu-item index="approvals" icon="el-icon-document">
            <a href="/insert" class="nav-item">新增账号</a>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区 -->
      <el-main class="admin-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const username = ref("超级管理员");
    const activeMenu = ref("dashboard");

    const handleMenuSelect = (index) => {
      activeMenu.value = index;
      window.$router.push({ name: index });
    };

    return {
      username,
      activeMenu,
      handleMenuSelect,
    };
  },
};
</script>

<style scoped>
.admin-container {
  height: 100vh;
  background: linear-gradient(135deg, #f0f8ff, #e6e6fa);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.admin-header {
  background-color: #3c4b64;
  color: white;
  line-height: 50px;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-right {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 10px;
  background-color: #ffffff;
  color: #3c4b64;
  border: 2px solid #3c4b64;
}

.username {
  font-weight: bold;
  font-size: 16px;
}

.admin-aside {
  background-color: #f7f9fc;
  border-right: 1px solid #dcdfe6;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  padding-top: 20px;
}

.el-menu-vertical {
  border: none;
}

.el-menu-item {
  font-size: 14px;
  color: #3c4b64;
  font-weight: 500;
}

.el-menu-item:hover {
  background-color: #e6f7ff;
  color: #409eff;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: white;
}

.admin-main {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px;
  overflow: auto;
}
</style>
